<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <meta name="keywords" content="搜索" />
    <meta name="description" content="搜索" />
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width,viewport-fit=cover">
    <link th:href="@{/shoppingApi/css/public.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/cart.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/weui.min.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/jquery-weui.min.css}" rel="stylesheet">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header"  th:content="${_csrf.headerName}"/>
</head>
<body>
<div class="main cart">
    <div class="main_con c323232">
        <div class="title cfff ftl pl15 pr15">
            <p class="ft18">购物车<span>共<i th:text="${list.count}"></i>件宝贝</span></p>
            <!--<p class="ft12 pb10">共<i th:text="${list.count}"></i>件宝贝</p>-->
        </div>
        <div class="cart_con ml10 mr10">
            <!--<label th:text="${list}"></label>-->
            <div th:if="${#lists.size(list.productInfo)>0}">
                <div class="good bround10 bgfff mb15">
                    <p class="bb goodtitle flex flex-ac pl15 pr15">
                        <input name="goods" type="checkbox" class="checkbox">
                        <img th:src="@{/shoppingApi/images/carttip.png}" class="mr15 ml15">
                        <span class="ft17 c323232">新零售微店</span>
                    </p>
                    <div class="rela goodcon" th:goodid="${model.shoppingId}"th:each="model:${list.productInfo}">
                        <div class="goodid">
                            <div class="flex pl15 pr15 pt15 pb10">
                                <label>
                                    <input name="goods" type="checkbox" class="goodtype">
                                </label>
                                <a class="goodimg ml15 mr15" th:href="${'/wap/getDetails?productId='+model.productId}">
                                    <img class="w100"  th:src="${'http://xlspic.ycsqd.com'+model.imgUrl}">
                                </a>
                                <div class="it1 ml5" style="flex: none;width: 60%;">
                                    <div class="flex flex-col h100">
                                        <a class="db" th:href="${'/wap/getDetails?productId='+model.productId}">
                                            <p class="ft17 323232" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" th:text="${model.productName}"></p>
                                            <p class="ft12 c646464" th:text="${model.productDesc}"></p>
                                            <input type="hidden" class="active-sign" name="activeSign" th:value="${model.activeSign}"/>
                                            <input type="hidden" class="pro-Id" name="proId" th:value="${model.productId}"/>
                                            <input type="hidden" class="guige-Id" name="guigeId" th:value="${model.guigeId}"/>
                                        </a>

                                        <!--<p class="ft14 c969696" th:text="${model.proColor}"></p>-->
                                        <p class="ft12 cf70029"></p>
                                        <p>
                                            <!--<span class="ft14 c646464 textover"><span class="nft10">￥</span><label th:text="${model.productPrice}"></label></span>-->
                                            <span class="ft14 cf70029"><span class="nft10">￥</span><label th:text="${model.productPrice}"></label></span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="overflow">
                                <div class="buynum-wrap fr ft14 c646464 ftc mr15 pb15">
                                    <span th:id="${model.shoppingId}" class="fl">-</span>
                                    <span class="buynum fl">
                                    <input type="number" th:value="${model.productCount}" th:price="${model.productPrice}">
                                </span>
                                    <span th:id="${model.shoppingId}" class="fr">+</span>
                                </div>
                            </div>
                        </div>
                        <div class="right15-pro">
                            <span class="collection fl" th:dapoid="${model.productId}" th:dapopr="${model.productPrice}">移入收藏夹</span>
                            <span class="delete fl" th:data="${model.shoppingId}">删除</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="fixedBox50">
            <div class="fixed-bottom">
                <div class="pl15 pr15 allcheck flex flex-ac bgfff rela">
                    <input name="goods" type="checkbox" class="checkbox mr15">
                    <span>全选</span>
                    <div class="abs right15">
                        <span class="cf70029">
                            <span class="ft14">合计：</span><span class="ft12">￥</span><span class="17 money">0.00</span>
                        </span>
                        <span class="btn ft14 cfff bold ftc bround20 ml10">结算(<span class="ml5 mr5 total">0</span>)</span>
                    </div>
                </div>
                <ul class="bottom flex flex-pc ftc bgfff nft10 c323232">
                    <li class="it1">
                        <a th:href="@{/wap/productIndex}" class="db">
                            <span class="img"></span>
                            <span>首页</span>
                        </a>
                    </li>
                    <li class="it1">
                        <a th:href="@{/wap/selectProductYJAndRjClassfy}" class="db">
                            <span class="img"></span>
                            <span>分类</span>
                        </a>
                    </li>
                    <li class="it1 active">
                        <a th:href="${'/wap/getCartList'}" class="db">
                            <span class="img"></span>
                            <span>购物车</span>
                        </a>
                    </li>
                    <li class="it1">
                        <a th:href="@{/wap/openUserCenter}" class="db">
                            <span class="img"></span>
                            <span>我的</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="toast ft15 ftc cfff flex flex-ac flex-pc hide">
            <div class="toast_con">
                <p>成功移入</p>
                <p class="mt10">你可以在“我的”-“商品收藏”查看</p>
            </div>
        </div>
    </div>
</div>
<div th:if="${#lists.size(list.productInfo)==0}">
    <span class="no-product"></span>
</div>
</body>
<script th:src="@{/shoppingApi/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/shoppingApi/js/jquery-weui.min.js}"></script>
<script th:src="@{/shoppingApi/js/common.js}"></script>
<script type="application/javascript" >
    $(function () {
        /*单个商品操作*/
        // $(".cart_con input.goodtype").on('click',function () {
            //取消一个即取消该商铺全部
            if(!$(".cart_con input.goodtype").prop("checked")){
                var parent =$(this).parents(".good").find(".checkbox").prop("checked", false);
                $(".fixedBox50 input.checkbox").prop("checked", false)
            }
            //单个全部选择即选择该商铺
            var checkedall = true;
            var length = $(this).parents(".good").find(".goodtype").length;
            for(var i=0;i<length;i++){
                if(!$(this).parents(".good").find(".goodtype").eq(i).prop("checked")){
                    checkedall=false;
                    break;
                }
            }
            if(checkedall){
                $(this).parents(".good").find(".checkbox").prop("checked", true);
            }
            numtotal();
        // })
    });
    var header = $("meta[name='_csrf_header']").attr("content");
    var token =$("meta[name='_csrf']").attr("content");
    /*
    *tsubaki
    */

    function setValue(shoppingId,value) {
        var res=0;
        $.ajax({
            url: '/wap/updateCart?shoppingId='+shoppingId+"&number="+value,
            type: 'post',
            dataType: 'json',
            contentType: 'application/json',
            async: false,
            success: function(data){
                if(data.data>0)
                {
                    res=data.data;
                }
            },
            beforeSend : function(xhr) {
                xhr.setRequestHeader(header, token);
            },
        });
        return res;
    }


    /*复选框按钮逻辑*/
    /*单个商品操作*/

    var proId=0;
    var guigeId=0;
    var activeSign='';
    $(".cart_con input.goodtype").on('click',function () {
        activeSign=$(this).parents('.goodid').find('.active-sign').val();
        if(activeSign=='7'){
           proId= $(this).parents('.goodid').find('.pro-Id').val();
           guigeId= $(this).parents('.goodid').find('.guige-Id').val();
           buyInfo=queryBuyCount(proId,guigeId,activeSign);
            if(buyInfo=='0'){
                $(this).prop('checked',false)
                $.toast("已达商品限购数量，不能再购买！");
                buyInfo='';
                return;
            }
            if(buyInfo=='1'){
                $(this).prop('checked',false)
                $.toast("已达个人限购数量，不能再购买！");
                buyInfo='';
                return;
            }
        }

        //取消一个即取消该商铺全部
        if(!$(this).prop("checked")){
            var parent =$(this).parents(".good").find(".checkbox").prop("checked", false);
            $(".fixedBox50 input.checkbox").prop("checked", false)
        }
        //单个全部选择即选择该商铺
        var checkedall = true;
        var length = $(this).parents(".good").find(".goodtype").length;
        for(var i=0;i<length;i++){

            if(!$(this).parents(".good").find(".goodtype").eq(i).prop("checked")){
                checkedall=false;
                break;
            }
        }
        if(checkedall){
            $(this).parents(".good").find(".checkbox").prop("checked", true);
        }
        numtotal();
    })
    /*单个商铺操作*/
    $(".cart_con input.checkbox").on('click',function () {
        if($(this).prop("checked")){
            $(this).parents(".good").find(".goodtype").each(function () {
                $(this).prop("checked", true);
            })
        }else{
            $(this).parents(".good").find(".goodtype").each(function () {
                $(this).prop("checked", false);
            })
        }
        numtotal();
    })
    /*改变数量*/
    $(".buynum-wrap span.fl").on('click',function () {
        if($(this).siblings(".buynum").find("input").val()>1){
            var nowinput = $(this).siblings(".buynum").find("input");
            var num = Number(nowinput.val())-1;
            nowinput.val(num);
            nowinput.attr("num",num);
            //tsubaki
            var res=setValue($(this).attr('id'),num);

            //tsubaki
            numtotal();
        }
    })
    $(".buynum-wrap span.fr").on('click',function () {
        var nowinput = $(this).siblings(".buynum").find("input");
        var num = Number(nowinput.val())+1;
        nowinput.val(num);
        nowinput.attr("num",num);
        //tsubaki
        var res=setValue($(this).attr('id'),num);


        //tsubaki
        numtotal();
    })
    $(".cart_con input[type='number']").change(function () {
        $(this).attr('num',$(this).val());
        numtotal();
    })
    /*全选*/
    $(".fixedBox50 input.checkbox").on('click',function () {
        if(!$(this).prop("checked")){
            $(".cart_con input:checkbox").each(function(){
                $(this).prop("checked", false);
            })
        }else{
            $(".cart_con input:checkbox").each(function(){
                $(this).prop("checked", true);
            })
        }
        numtotal();
    })
    /*计算总价*/
    var checkgid=[];
    var total=0;
    function numtotal() {
        var totalprice =0.00;
        checkgid=[];
        total=0;
        $(".cart_con .goodtype").each(function () {
            if($(this).prop("checked")){
                var goodid=$(this).parents(".goodcon").attr('goodid');
                checkgid.push(goodid);
                var parent = $(this).parents(".goodid").find("input[type='number']").attr("price");
                var num = $(this).parents(".goodid").find("input[type='number']").val();
                //alert("a:"+goodid+" b:"+parent+" c:"+num);
                totalprice += Number(parent)* Number(num);
                total +=Number(num);
            }
        })
        var totalprice = totalprice.toFixed(2)
        $(".allcheck .money").text(totalprice);
        $(".allcheck .total").text(total);
    }

    /*左划收藏移除*/
    var startX =0;
    var startY =0;
    $(".goodcon").on("touchstart", function (e) {
        startX = e.originalEvent.changedTouches[0].clientX;
        startY = e.originalEvent.changedTouches[0].clientY;
    });
    $(".goodcon").on("touchmove", function (e) {
        var moveX = e.originalEvent.changedTouches[0].clientX;
        var moveY = e.originalEvent.changedTouches[0].clientY;
        var angle = setAngle({ X:startX, Y: startY }, { X: moveX, Y: moveY });
        if (Math.abs(angle) > 30) return;
        if (moveX > startX) {
            $(this).find(".goodid").removeClass("touch_active");
        } else {
            $(this).parents(".cart_con").find(".touch_active").removeClass("touch_active");
            $(this).find(".goodid").addClass("touch_active");

        }
    });
    function setAngle(start, end) {
        var _X = end.X - start.X,
            _Y = end.Y - start.Y;
        return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
    }

    function productCollect(pid,pie){
        var productId=pid;
        var minPrice=pie;
        $.ajax({
            async:false,
            url:'/wap/proAddCollect?productId='+productId+"&productPrice="+minPrice,
            success:function (res) {
                console.log(res);
                if(res.loginMsg!=null){
                    if(res.msg=='1'){
                        $.toast('已收藏！');
                    }else{
                        $.toast('收藏数据有误！','cancel');
                    }
                }else{
                    window.location.href='/wap/openLoginByPhone';
                }
            }
        })
    }
    /*收藏*/
    $(".right15-pro .collection").on('click',function () {
        var goodid =$(this).parents(".goodcon").attr('goodid');
        //$(this).parent().prev().removeClass("touch_active");
        //$(".toast").removeClass("hide");

        // $('.product-collect').on('click',function () {
        //     productCollect();
        // })
        var productid=$.trim($(this).attr('dapoid'));
        var price=$.trim($(this).attr('dapopr'));
        productCollect(productid,price);


        setTimeout(function () {
            $(".toast").addClass("hide");
        },2000)
    })
    /*删除*/
    $(".right15-pro .delete").on('click',function () {
        // var goodid =$(this).parents(".goodcon").attr('goodid');
        var shoppingId =$(this).attr('data');
        $(this).parent().prev().removeClass("touch_active");
        var  obj=$(this);
        $.ajax({
            url: '/wap/deleteCart?shoppingId='+shoppingId,
            type: 'post',
            dataType: 'json',
            contentType: 'application/json',
            async: false,
            success: function(data){
                if(data.data>0){
                    obj.parent().parent().remove();
                    $.toast('移除成功！', 'text');
                }else {
                    $.toast('移除失败！', 'text');
                }
            },
            beforeSend : function(xhr) {
                xhr.setRequestHeader(header, token);
            },
        });
        //alert("删除商品id:"+goodid);
    })
    /*结算*/
    $(".allcheck .btn").on('click',function () {
        //alert("选择商品数组:"+checkgid);
        //url: '/wap/updateCart?shoppingId='+shoppingId+"&number="+value,
        //var strs=checkgid.split(',');
        //alert(JSON.stringify(checkgid));return;


        if(checkgid.length<=0){
            alert("请选择要购买的商品!")
        }else {
            window.location.href="/wap/getSureCartList?cartids="+checkgid
        }
    })

/*活动专区商品购买限制数量*/
    var buyInfo='';
    function queryBuyCount(productId,guigeId,activeSign) {
        $.ajax({
            async:false,
            url: '/wap/getPayOrderProductCount?productId=' + productId + '&guigeId=' + guigeId + '&activeSign=' + activeSign,
            success: function (res) {
                if(res.msg=="0"){
                    buyInfo='0';
                }else if(res.msg=='1'){
                    buyInfo='1';
                }
            }

        })
        return buyInfo;
    }

</script>
</html>